<template>
  <div>
    <a-card>
      <a-form-model ref="form" layout="inline" :model="form">
        <a-row>
          <a-col>
            <a-form-model-item label="关注" prop="region">
              <a-select
                v-model="form.region"
                placeholder="请选择状态"
                style="width:120px"
                :options="[ { value: 'NEW', label: '新创建' }, { value: 'DONE', label: '已完成' }]"
              />
            </a-form-model-item>
            <a-form-model-item label="消息时间" prop="dueDate">
              <a-range-picker
                v-model="form.dueDate"
              />
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="handleSearch">
                查找
              </a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="handleReset">
                重置
              </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>

      <a-table
        :loading="loading"
        rowKey="id"
        :columns="columns"
        :data-source="data"
        class="mission-list__table"
      >
        <!-- <template slot="operation" slot-scope="record" >
          <div>
            <a @click="del(record.id)" style="margin-right: 10px">删除</a>
          </div>
        </template> -->
      </a-table>
    </a-card>
  </div>
</template>

<script>
// api
import { fetchAllMissions, detail, deleteKeyResult, del } from '@/api/mission'

const columns = [
  // { title: '编号', dataIndex: 'id', key: 'id' },
  { title: '消息内容', dataIndex: 'content', key: 'content' },
  { title: '消息来源', key: 'status', scopedSlots: { customRender: 'status' } },
  { title: '消息事件', dataIndex: 'dueDate', key: 'dueDate' }
  // { title: '操作', key: 'operation', scopedSlots: { customRender: 'operation' } }
]

export default {
  data () {
    return {
      loading: false,
      form: {
        user: undefined,
        region: undefined,
        dueDate: undefined
      },
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0
      },
      columns,
      data: []
    }
  },
  mounted () {
    this.handleSearch(true)
  },
  methods: {
    async handleSearch (valid) {
      try {
        this.loading = true
        if (!valid) { throw new Error() }
        const content = await fetchAllMissions({
            ...this.form,
            pageNumber: 1,
            pageSize: 1000
          })
          console.log(content)
        content.forEach(record => {
          record.loading = false
          record.innerData = []
        })
        this.data = content
      } catch (error) {
        this.$notification.error({
          message: '错误',
          description: error.message || '请求信息错误，请稍后重试'
        })
      } finally {
        this.loading = false
      }
    },

    async updateList () {
      await this.handleSearch(true)
    },

    async del (id) {
      try {
        this.loading = true
        await del(id)
        this.updateList()
      } catch (error) {

      } finally {
        this.loading = false
      }
    },

    handleReset () {
      this.$refs.form.resetFields()
    },

    showEditMissionModal (id) {
      this.$refs.editMissionModal.show(id)
    },
    showAddResultModal (id) {
      this.$refs.addResultModal.show(id)
    },
    async getInnerData (record) {
      try {
        record.loading = true
          const content = await detail(record.id)
          record.innerData = content.keyResultList
      } catch (error) {

      } finally {
        record.loading = false
      }
    },

    async deleteKeyResult (record, keyResultId) {
      console.log(record, keyResultId)
      try {
        record.loading = true
        await deleteKeyResult(keyResultId)
        this.updateResultList(record)
      } catch (error) {

      } finally {
        record.loading = false
      }
    }
  }
}
</script>
<style lang="less">
.mission-list{
  &__table {
    margin-top: 10px;
  }
}
</style>
